import amoutPng from '@/assets/img/amout.png';
import jiaruamoutPng from '@/assets/img/jiaruamout.png';
import MapMaker from '@/components/Analysis/MapMaker';
import AgentTotalStastica from '@/components/Analysis/Stastica/AgentTotalStastica';
import GoodsTotalStastica from '@/components/Analysis/Stastica/GoodsTotalStastica';
import OrderTotalStastica from '@/components/Analysis/Stastica/OrderTotalStastica';
import SumTotalCard from '@/components/Analysis/Sum/SumTotalCard';
import { findByLevelLogList, homeChartStastic } from '@/services/stastica';
import useUserStore from '@/stores/userStore';
import ProCard from '@ant-design/pro-card';
import { useModel } from '@umijs/max';
import { Flex, Space } from 'antd';
import React, { useEffect, useState } from 'react';

import MyTable from '@/components/MyTable';
import { useMount, useRequest } from 'ahooks';

const HomePage: React.FC = () => {
  const { name } = useModel('global');
  const [homeChart, setHomeChart] = useState<API.HomeChart>({
    wallet: {
      priceLog: 0,
      price: 0,
    },
    withdrawal: {
      wait: 0,
      price: 0,
    },
    user: {
      agent: 0,
      users: 0,
    },
    order: {
      count: 0,
      shipments: 0,
    },
  });
  const columns = [
    { dataIndex: 'index', valueType: 'indexBorder', width: 30 },
    { dataIndex: 'avatar', valueType: 'avatar', width: 50 },
    { dataIndex: 'name' },
    { dataIndex: 'price', valueType: 'money' },
  ];

  const { runAsync: runAsync } = useRequest(homeChartStastic, { manual: true });
  const [userInfo, setUserInfo] = useState<API.LoginUser>();
  useEffect(() => {
    let useUserStore1 = new useUserStore();
    setUserInfo(useUserStore1.getUserInfo());
  }, [name]);
  useMount(() => {
    runAsync().then((res) => {
      setHomeChart(res);
    });
  });
  return (
    <>
      {/*<div className={styles.container}>
        <Guide name={trim(name)} />
        <p>{userInfo?.username}</p>
        <MButton accessKey={'sys'} actionType={'edit'} />
        <MButton accessKey={'sys'} actionType={'delete'} />
        <MButton accessKey={'sys'} actionType={'view'} />
      </div>*/}

      <Space direction="vertical" size={20}>
        <Flex gap={'small'}>
          <GoodsTotalStastica />
          <OrderTotalStastica />
          <AgentTotalStastica />
        </Flex>
        <Flex gap={'small'}>
          <SumTotalCard
            icon={amoutPng}
            subIcon={jiaruamoutPng}
            title={'现在余额'}
            data={homeChart?.wallet?.price ?? 0}
            subTitle={'收入余额'}
            subData={homeChart?.wallet?.priceLog ?? 0}
          />
          <SumTotalCard
            icon={amoutPng}
            subIcon={jiaruamoutPng}
            title={'提现总额'}
            data={homeChart?.withdrawal?.price ?? 0}
            subTitle={'待审核'}
            subData={homeChart?.withdrawal?.wait ?? 0}
          />
          <SumTotalCard
            icon={amoutPng}
            subIcon={jiaruamoutPng}
            title={'订单总数'}
            data={homeChart?.order?.count ?? 0}
            subTitle={'待发货'}
            subData={homeChart?.order?.shipments ?? 0}
          />
          <SumTotalCard
            icon={amoutPng}
            subIcon={jiaruamoutPng}
            title={'用户总数'}
            data={homeChart?.user?.users ?? 0}
            subTitle={'代理'}
            subData={homeChart?.user?.agent ?? 0}
          />
        </Flex>
        <Flex gap={'small'}>
          <ProCard>
            <MapMaker />
          </ProCard>

          <ProCard title="排行">
            <MyTable
              toolbar={false}
              request={findByLevelLogList}
              columns={columns}
            />
          </ProCard>
        </Flex>
      </Space>
    </>
  );
};

export default HomePage;
